<template>
<el-container>
  <el-header style="height: auto;">
    <el-row>
      <el-col>
        <el-button type="primary" size="small" @click="toBack">返回</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xl="{ span: 4, push: 1 }">
        <h2> 账户信息</h2>
      </el-col>
    </el-row>
  </el-header>
  <el-main>
    <el-form>
      <el-row>
        <el-col class="box" :xl="{ span: 4, push: 1 }" :lg="{ span: 6, push: 1 }">
          <el-form-item label="设备编号" label-width="90px">
            <el-input size="small" v-model="equipmentNumber" :disabled="id != 0"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="box" :xl="{ span: 4, push: 4 }" :lg="{ span: 6, push: 2 }">
          <el-form-item label="设备类型" label-width="90px">
            <el-input size="small" v-model="dictEquipmentType"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="box" :xl="{ span: 11, push: 1 }" :lg="{ span: 6, push: 1 }">
          <el-form-item label="所属区域" label-width="90px">
            <el-input type="textarea" size="small" v-model="area"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="box" :xl="{ span: 4, push: 1 }" :lg="{ span: 6, push: 1 }">
          <el-form-item label="绑定业务号码" label-width="90px">
            <el-input size="small" v-model="cardNumber" :disabled="id != 0"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="box" :xl="{ span: 4, push: 4 }" :lg="{ span: 6, push: 2 }">
          <el-form-item label="卡体类型" label-width="90px" prop="dictCardBodyType">
            <el-select size="small" placeholder="卡体类型" v-model="dictCardBodyType">
              <el-option v-for="card in bodyTypeSelect" :key="card" :label="card" :value="card"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="button">
        <el-col :xl="{ span: 4, push: 1 }" :lg="{ span: 8, push: 1 }" :md="{ span: 8 }" :sm="{ span: 8 }" :xs="{ span: 22 }">
          <el-form-item label="" label-width="90px">
            <el-button size="small" type="primary" @click="save">提交</el-button>
            <el-button size="small"> 重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-main>
</el-container>
</template>

<script>
  import {getBodyType, getEquipment, saveEquipment} from '@/api/getData'

export default {
  name: 'Edit',
  data() {
    return {
      id:"",
      equipmentNumber:"",
      dictEquipmentType:"",
      area:"",
      cardNumber:"",
      dictCardBodyType:"",
      bodyTypeSelect:[]
    }
  },
  created() {
    this.id = this.$route.params.id
    this.getBodyType()
    if(this.id != 0){
      this.getEquipment()
    }
  },
  methods: {
    async save() {
      const returnData = await saveEquipment({
        id:this.id,
        equipmentNumber : this.equipmentNumber,
        dictEquipmentType : this.dictEquipmentType,
        area : this.area,
        cardNumber : this.cardNumber,
        dictCardBodyType : this.dictCardBodyType
      })
      if(returnData._result){
        this.$message({ message: '操作成功', type: 'success'})
      }
    },
    async getBodyType(){
      const returnData = await getBodyType({
      })
      if (returnData._result) {
        this.bodyTypeSelect = returnData.data.bodyType
      }
    },

    async getEquipment(){
      const returnData = await getEquipment({
        id:this.id
      })
      if (returnData._result) {
        if(returnData.data != null){
          this.id = returnData.data.id
          this.equipmentNumber = returnData.data.equipmentNumber
          this.dictEquipmentType = returnData.data.dictEquipmentType
          this.area = returnData.data.area
          this.cardNumber = returnData.data.cardNumber
          this.dictCardBodyType = returnData.data.dictCardBodyType
        }
      }
    },
    toBack() {
      this.$router.back(-1);
    }
  }
}
</script>

<style scoped lang="scss">
.el-header {
  margin-top: 5vh;
}
.el-main {
  .el-form {
    .button /deep/ .el-col {
      display: flex;
      justify-content: flex-start;
    }

    .box /deep/ label {
      text-align: left;
    }
    .sale /deep/ label {
      letter-spacing: 7px;
    }
  }
}
.el-popper[x-placement^=top] {
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;
  margin-right: -39px;
  button {
    display: block;
  }
  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}
</style>
